<template>
  <div
    :id="id"
    :style="{width:width+'px',height:height+'px',margin:'34px auto'}"
    class="m-map"/>
</template>

<script>
export default {
  name: 'Map',
  props: {
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    point: {
      type: Array,
      default() {
        return [116.46, 39.92]
      }
    }
  },
  data() {
    return { id: 'map' }
  },
  mounted() {
    window.onMapLoad = () => {
      const map = new AMap.Map(this.id, {
        resizeEnable: true,
        zoom: 11,
        center: this.point
      })
      AMap.plugin('AMap.ToolBar', () => {
        const toolbar = new AMap.ToolBar()
        map.addControl(toolbar)
      })
      let marker = new window.AMap.Marker({
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        position: self.point
      })
      self.marker = marker
      marker.setMap(map)
    }
    var url =
      'https://webapi.amap.com/maps?v=1.4.12&key=bfa58fd3b358132301416096a1844857&callback=onMapLoad'
    var jsapi = document.createElement('script')
    jsapi.charset = 'utf-8'
    jsapi.src = url
    document.head.appendChild(jsapi)
  }
}
</script>
